/*
 * Bootstrap (2.3.1) Wrapper
 */
(function( window ) {
    var Me = {};
    Me.visiblePhone = 'visible-phone';
    Me.visibleTablet = 'visible-tablet';
    Me.visibleDesktop = 'visible-desktop';

    Me.hiddenPhone = 'hidden-phone';
    Me.hiddenTablet = 'hidden-tablet';
    Me.hiddenDesktop = 'hidden-desktop';

    Me.isPhone = $('<div>').attr({
        'class':Me.visiblePhone
    }).css('display') != 'none';
    Me.isTablet = $('<div>').attr({
        'class':Me.visibleTablet
    }).css('display') != 'none';

    //init isDesktop
    $('body').append($('<div>').attr({
        'class':Me.visibleDesktop,
        'id':'visibleDesktop'
    }));
    Me.isDesktop = $('#visibleDesktop').css('display') != 'none';
    $('#visibleDesktop').remove();

    //init isPhone
    $('body').append($('<div>').attr({
        'class':Me.visiblePhone,
        'id':'visiblePhone'
    }));
    Me.isPhone = $('#visiblePhone').css('display') != 'none';
    $('#visiblePhone').remove();

    //init isDesltop
    $('body').append($('<div>').attr({
        'class':Me.visibleTablet,
        'id':'visibleTablet'
    }));
    Me.isTablet = $('#visibleTablet').css('display') != 'none';
    $('#visibleTablet').remove();

    Me.element = function(content,attr,tag,moreClass){
        attr = (typeof attr == 'object')?attr:{};

        if(typeof content == 'string' || typeof content == 'undefined' || content == null){
            return $('<'+tag+'>',attr).addClass(moreClass).html(content);
        }else{
            var el =  $('<'+tag+'>',attr).addClass(moreClass), i = 0, length = content.length;
            if(length){
                for(i=0;i<length;i++){
                    el.append(content[i]);
                }
            }else{
                el.append(content);
            }
            return el;
        }

    }
    Me.clear = function(){
        return $('<div>',{
            'class':'clear clearfix'
        });
    }
    Me.generateModal = function(InnerBody, Head,Foot, ModalAttr){
        var Modal = $('<div>',ModalAttr).addClass('modal hide'),
        Header = $('<div>',{
            'class':'modal-header'
        }).append($_Btw.button('&times;',{
            'type':'button',
            'class':'close',
            'data-dismiss':'modal',
            'aria-hidden':'true'
        })).append($('<div>',{
            'class':'inner'
        })),
        Body = $('<div>',{
            'class':'modal-body'
        }),
        Footer = $('<div>',{
            'class':'modal-footer'
        });
        if(Head !== null && Head !== false){
            Header.find('.inner').append(Head)
        }
        if(InnerBody !== null && InnerBody !== false){
            Body.append(InnerBody)
        }
        if(Foot !== null && Foot !== false){
            Footer.append(Foot)
        }
        return Modal.append(Header,Body,Footer);
    }
    Me.pullLeft = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'pull-left');
    }
    Me.pullRight = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'pull-right');
    }
    //form
    Me.formStdInputCheckbox = function(label,keyName,attrInput,attrLabel){
        attrInput = $.extend({
            'name':keyName,
            'id':keyName
        },attrInput);
        attrInput.type = typeof attrInput.type == 'string' && (attrInput.type == 'checkbox' || attrInput.type == 'radio') ? attrInput.type: 'checkbox';
        attrLabel = $.extend(attrLabel,{
            'for':attrInput.id
        });
        return $('<label>',{'html':label}).attr(attrLabel).addClass(attrInput.type).prepend($('<input>').attr(attrInput));
    }
    Me.formControlStdInput = function(label,keyName,attrInput,attrLabel){
        attrInput = $.extend({
            'type':'text'
        },attrInput,{
            'name':keyName,
            'id':keyName
        });
        attrLabel = $.extend(attrLabel,{
            'for':attrInput.id
        });
        var l = $_Btw.formControlLabel(label,attrLabel);
        var t = $('<input>').attr(attrInput);
        t = $_Btw.formControl(t);
        return $_Btw.formControlGroup(l).append(t);
    }
    /*Table*/
    Me.generateRowTable = function(Opts,attr,head,fluid){
        //        _log.warn('head',head.length,head);
        fluid = typeof fluid == 'boolean' && fluid == true;
        var  i = 0, j = 0, lengthH = 0, lengthI = Opts.length,lengthJ = 0, Line = {},LineAttr = {},Row = {},RowAttr = {},RowContent = '',Tr = {},Table = $('<div>',attr).addClass('table'),size = '';
        if(lengthI){
            if(head !== null && typeof head.length != 'undefined' && head.length){
                lengthH = head.length;
                Tr = fluid ? $_Btw.rowFluid(): $_Btw.row();
                for(i=0;i<lengthH;i++){
                    Row = head[i];
                    size = typeof Row.size == 'undefined'  ? '':Row.size;
                    RowContent = typeof Row.content == 'undefined'  ? '':Row.content;
                    RowAttr = typeof Row.attr == 'undefined'  ? {}:Row.attr;
                    Tr.append($_Btw.spanner(size,RowContent,RowAttr,Row.tag));
                }
                Table.append(Tr.addClass('tr-head'));
            }

            for(i=0;i<lengthI;i++){
                Line = Opts[i], lengthJ = Line.datas.length;
                LineAttr = typeof Line.attr == 'object' ? Line.attr : {};
                Tr = fluid ? $_Btw.rowFluid(null,LineAttr): $_Btw.row(null,LineAttr);
                if(lengthJ){
                    j = 0;
                    for(j=0;j<lengthJ;j++){
                        Row = Line.datas[j];
                        size = typeof Row.size == 'undefined'  ? '':Row.size;
                        RowContent = typeof Row.content == 'undefined'  ? '':Row.content;
                        RowAttr = typeof Row.attr == 'undefined'  ? {}:Row.attr;
                        Tr.append($_Btw.spanner(size,RowContent,RowAttr,Row.tag))
                    }

                }
                Table.append(Tr.addClass('tr-body'));
            }
        }
        return Table;
    }
    /* Navbar */
    Me.nav = function(content, attr){
        return $_Btw.element(content,attr,'ul','nav');
    }
    Me.navTabs = function(content, attr){
        return $_Btw.nav(content,attr).addClass('nav-tabs');
    }
    Me.navTabsStack = function(content, attr){
        return $_Btw.navTabs(content,attr).addClass('nav-stacked');
    }
    Me.navElement = function(content, attr){
        return $_Btw.element(content,attr,'li');
    }
    Me.navElementDivider = function(vertical){
        vertical = (typeof vertical == 'boolean' && vertical == true) ? 'divider-vertical':'divider';
        return $_Btw.element('',{},'li',vertical);
    }
    Me.navbar = function(content, attr){
        return $_Btw.element(content,attr,'div','navbar');
    }
    Me.navbarInner = function(content, attr){
        return $_Btw.element(content,attr,'div','navbar-inner');
    }
    Me.navList = function(Elements,attr){
        var Content = [], i = 0, l = Elements.length, Obj = null, LiAttr = {}, LiContent = '',LiClassMore = '';
        if(l){

            for(i=0;i<l;i++){
                Obj = Elements[i];
                LiClassMore = '';
                LiAttr = typeof Obj.attr == 'object' ? Obj.attr : {};
                LiContent = typeof Obj.content != 'undefined' ? Obj.content : '';
                if(typeof Obj.header == 'boolean' && Obj.header == true){
                    LiClassMore = 'nav-header';
                }else if(typeof Obj.active == 'boolean' && Obj.active == true){
                    LiClassMore = 'active';
                }
                Content.push($_Btw.element(LiContent,LiAttr,'li',LiClassMore));
            }
        }
        return $_Btw.nav(Content,attr).addClass('nav-list')

    }
    /**
     * Eg.
     *  {
     *      toggle:{
     *          content:Content,
     *          attr:{'id':'uid'}
     *      },
     *      menu:[
     *          {
     *              content:Content,
     *              attr:{'id':'uid'}
     *          },
     *          {
     *              content:Content,
     *              attr:{'id':'uid'}
     *          },
     *          {
     *              content:Content,
     *              attr:{'id':'uid'}
     *          }
     *      ]
     *  }
     *
     **/
    Me.generateDropdownButton = function(Opt){
        var Return = [],
        AltAttr = {},
        i = 0,
        Menu = $('<ul>',{
            'class':'dropdown-menu'
        });
        AltAttr = (typeof Opt.toggle.attr == 'object') ? Opt.toggle.attr: {};
        Return.push($('<a>',AltAttr).addClass('dropdown-toggle').attr({
            'href':'#',
            'data-toggle':'dropdown'
        }).append(Opt.toggle.content, $('<b>',{
            'class':'caret'
        })));
        for(i in Opt.menu){
            if(typeof Opt.menu[i].divider == 'boolean'){
                Menu.append($_Btw.navElementDivider());
            }else{
                AltAttr = (typeof Opt.menu[i].attr == 'object') ? Opt.menu[i].attr: {};
                Menu.append($_Btw.navElement($('<a>',AltAttr).append(Opt.menu[i].content)));
            }
        }
        Return.push(Menu);
        return Return;
    }
    /* Navbar Generate */
    /**
     * Eg.
     * [
     *  {
     *      nav:[
     *          {
     *              content:Content,
     *              attr:{id:'uid2'}
     *          },
     *          {
     *              divider:true
     *          },
     *          {
     *              content:Content,
     *              attr:{id:'uid2'}
     *          },
     *          {
     *              dropdown:   cf:generateDropdownButton
     *          }
     *      ]
     *  },
     *  {
     *      content:Content
     *      attr:{id:'uid3'}
     *  }
     * ]
     *
     **/
    Me.basicNavbar = function(O,Attr){
        var i = 0, j = 0, Content = [], Nav = [],NavAttr = {},BtnBar = [], responsive = false;
        for(i in O){
            if(typeof O[i].nav == 'object'){
                Nav = [];
                j = 0;
                responsive = (typeof O[i].responsive == 'object' && typeof O[i].responsive.btn == 'object' && typeof O[i].responsive.collapse == 'object');
                if(responsive){
                    BtnBar.push(O[i].responsive.btn);
                }
                for(j in O[i].nav){

                    if(typeof O[i].nav[j].divider == 'boolean'){
                        Nav.push($_Btw.navElementDivider(true));
                    }else if(typeof O[i].nav[j].dropdown == 'object'){
                        Nav.push($_Btw.navElement($_Btw.generateDropdownButton(O[i].nav[j].dropdown),{
                            'class':'dropdown'
                        }));
                    }else{
                        NavAttr = (typeof O[i].nav[j].attr == 'object') ? O[i].nav[j].attr: {};
                        Nav.push($_Btw.navElement(O[i].nav[j].content,NavAttr));
                    }
                }
                NavAttr = (typeof O[i].attr == 'object') ? O[i].attr: {};
                if(responsive){
                    Content.push(O[i].responsive.collapse.append($_Btw.nav(Nav,NavAttr)));
                }else{
                    Content.push($_Btw.nav(Nav,NavAttr));
                }

            }else{
                Content.push(O[i].content);
            }
        }
        Content = $.merge(BtnBar,Content);
        return $_Btw.navbar($_Btw.navbarInner($_Btw.container(Content)),Attr);
    }
    Me.navCollapse = function(target){
        target = typeof target == 'string' ? target :'';
        return $('<div>',{
            'class':'nav-collapse collapse'
        }).addClass(target)
    }
    /* Form */
    Me.formControl = function(content, attr){
        return $_Btw.element(content,attr,'div','control');
    }
    Me.formControlLabel = function(content, attr){
        return $_Btw.element(content,attr,'label','control-label');
    }
    Me.formControlGroup = function(content, attr){
        return $_Btw.element(content,attr,'div','control-group')
    }
    /* Components */
    Me.row = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'row');
    }
    Me.rowFluid = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'row-fluid');
    }
    Me.container = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'container');
    }
    Me.containerFluid = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'container-fluid');
    }
    Me.row = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'row');
    }
    Me.rowFluid = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'row-fluid');
    }
    Me.spanner = function(number,content,attr,tag){
        number = number+'';
        tag = (typeof tag == 'string') ? tag : 'div';
        return $_Btw.element(content,attr,tag,'span'+number);
    }
    Me.span = function(content,attr,tag){
        return $_Btw.spanner('',content,attr,tag);
    }
    Me.span1 = function(content,attr,tag){
        return $_Btw.spanner('1',content,attr,tag);
    }
    Me.span2 = function(content,attr,tag){
        return $_Btw.spanner('2',content,attr,tag);
    }
    Me.span3 = function(content,attr,tag){
        return $_Btw.spanner('3',content,attr,tag);
    }
    Me.span4 = function(content,attr,tag){
        return $_Btw.spanner('4',content,attr,tag);
    }
    Me.span5 = function(content,attr,tag){
        return $_Btw.spanner('5',content,attr,tag);
    }
    Me.span6 = function(content,attr,tag){
        return $_Btw.spanner('6',content,attr,tag);
    }
    Me.span7 = function(content,attr,tag){
        return $_Btw.spanner('7',content,attr,tag);
    }
    Me.span8 = function(content,attr,tag){
        return $_Btw.spanner('8',content,attr,tag);
    }
    Me.span9 = function(content,attr,tag){
        return $_Btw.spanner('9',content,attr,tag);
    }
    Me.span10 = function(content,attr,tag){
        return $_Btw.spanner('10',content,attr,tag);
    }
    Me.span11 = function(content,attr,tag){
        return $_Btw.spanner('11',content,attr,tag);
    }
    Me.span12 = function(content,attr,tag){
        return $_Btw.spanner('12',content,attr,tag);
    }
    /* label */
    Me.label = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag:'div';
        return $_Btw.element(content,attr,tag,'label');
    }
    Me.label = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag:'div';
        return $_Btw.element(content,attr,tag,'label');
    }
    Me.labelImportant = function(content,attr,tag){
        return $_Btw.label(content,attr,tag).addClass('label-important');
    }
    Me.labelSuccess = function(content,attr,tag){
        return $_Btw.label(content,attr,tag).addClass('label-success');
    }
    Me.labelWarning = function(content,attr,tag){
        return $_Btw.label(content,attr,tag).addClass('label-warning');
    }
    Me.labelInfo = function(content,attr,tag){
        return $_Btw.label(content,attr,tag).addClass('label-info');
    }
    Me.labelInverse = function(content,attr,tag){
        return $_Btw.label(content,attr,tag).addClass('label-inverse');
    }
    /* badge */
    Me.badge = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag:'div';
        return $_Btw.element(content,attr,tag,'badge');
    }
    Me.badge = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag:'div';
        return $_Btw.element(content,attr,tag,'badge');
    }
    Me.badgeImportant = function(content,attr,tag){
        return $_Btw.badge(content,attr,tag).addClass('badge-important');
    }
    Me.badgeSuccess = function(content,attr,tag){
        return $_Btw.badge(content,attr,tag).addClass('badge-success');
    }
    Me.badgeWarning = function(content,attr,tag){
        return $_Btw.badge(content,attr,tag).addClass('badge-warning');
    }
    Me.badgeInfo = function(content,attr,tag){
        return $_Btw.badge(content,attr,tag).addClass('badge-info');
    }
    Me.badgeInverse = function(content,attr,tag){
        return $_Btw.badge(content,attr,tag).addClass('badge-inverse');
    }
    /* Alert */
    Me.alert = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag:'div';
        return $_Btw.element(content,attr,tag,'alert');
    }
    Me.alertError = function(content,attr,tag){
        return $_Btw.alert(content,attr,tag).addClass('alert-error');
    }
    Me.alertSuccess = function(content,attr,tag){
        return $_Btw.alert(content,attr,tag).addClass('alert-success');
    }
    Me.alertInfo = function(content,attr,tag){
        return $_Btw.alert(content,attr,tag).addClass('alert-info');
    }
    /* Buttons */
    Me.icon = function(iconName,white,tag){
        tag = (typeof tag == 'string') ? tag :'i' ;
        var whiteClass = (typeof white == 'boolean' && white == true) ?' icon-white':'';
        return $_Btw.element('',{
            'class':iconName+whiteClass
        },tag);
    }
    Me.buttonCollapse = function(target,content){
        content = typeof content == 'undefined' ? [$_Btw.icon('icon-bar',false,'span'),$_Btw.icon('icon-bar',false,'span'),$_Btw.icon('icon-bar',false,'span')] :content;
        target = typeof target == 'string' ? target :'.nav-collapse';
        return $_Btw.button(content, {
            'class':'btn-navbar',
            'data-toggle':'collapse',
            'data-target':target
        })
    }
    Me.button = function(content,attr,tag){
        tag = (typeof tag == 'string') ? tag:'button';
        if(tag == 'button'){
            attr = $.extend({
                'type':'button'
            },attr);
        }else if(tag == 'a'){
            attr = $.extend({
                'href':'javascript:void(0);'
            },attr);
        }
        return $_Btw.element(content,attr,tag,'btn');
    }
    Me.buttonPrimary = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-primary')
    }
    Me.buttonInfo = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-info')
    }
    Me.buttonSuccess = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-success')
    }
    Me.buttonWarning = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-warning')
    }
    Me.buttonDanger = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-danger')
    }
    Me.buttonInverse = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-inverse')
    }
    Me.buttonLink = function(content,attr,tag){
        return $_Btw.button(content,attr,tag).addClass('btn-link')
    }
    Me.buttonDrop = function(button, dropDownElements, withSeparator, dropup){
        var el = $_Btw.buttonGroup();
        if(typeof dropup == 'boolean' && dropup == true){
            el.addClass('dropup');
        }
        el.append(button);
        if(typeof withSeparator == 'boolean' && withSeparator == true){
            el.append($_Btw.button($('<span class="caret">'),{
                'class':button.attr('class')+' dropdown-toggle',
                'data-toggle':'dropdown'
            }));

        }
        var dropDownElement = $('<ul class="dropdown-menu">');
        for(i in dropDownElements){
            dropDownElement.append($('<li>').append($('<a>').attr(dropDownElements[i].attr).html(dropDownElements[i].content)));
        }
        el.append(dropDownElement);
        return el;
    }
    Me.buttonGroup = function(content,attr){
        return $_Btw.element(content,attr,'div','btn-group');
    }
    Me.buttonGroupVertical = function(content,attr){
        return $_Btw.buttonGroup(content,attr).addClass('btn-group-vertical');
    }
    /* Modal */
    Me.setModal = function(header, content,saveButton){
        if(typeof $_Btw.modal == 'object' && $_Btw.modal.length){
            $_Btw.modal.remove();
            $_Btw.modal = null;
            delete $_Btw.modal;
        }
        $_Btw.modal = $('<div>').attr({
            'class':'modal hide fade'
        }).append($('<div>').attr({
            'class':'modal-header'
        }).append($('<h3>').html(header)));

        $_Btw.modal.append($('<div>').attr({
            'class':'modal-body'
        }).append(content));
        var footer = $('<div>').attr({
            'class':'modal-footer'
        }).append(content);
        if(typeof saveButton != 'undefined'){
            if(typeof saveButton == 'string'){
                footer.append($_Btw.button());
            }else if(typeof saveButton == 'string'){
                footer.append();
            }else if(typeof saveButton == 'object'){
                footer.append();
            }
        }
        $_Btw.modal.append(footer);
    }
    window.$_Btw = Me;
})( window );